<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

import NavBack from "@/components/nav/back.vue";
import MediaVideo from "@/components/media/video.vue";

onLoad((options) => {
  videoData.src = decodeURIComponent(options?.src);
  videoData.poster = decodeURIComponent(options?.poster);
});

const videoData = reactive({ src: "", poster: "" });
</script>

<template>
  <NavBack navigationBarTextStyle="white" />

  <view class="detail-source">
    <MediaVideo
      :src="videoData.src"
      :poster="videoData.poster"
      autoplay
      showFullscreenBtn
    />
  </view>
</template>

<style lang="scss">
page {
  background-color: #000000;
}

.detail-source {
  width: 100vw;
  height: calc(100vh - env(safe-area-inset-bottom));
}
</style>